<template>
	<view class="main">
		<view class="title">账号密码注册</view>
		<view class="phone">
			<u-input label-width="0" v-model="username" placeholder="请输入账号/手机号" ></u-input>
		</view>
		<view class="code">
			<u-input label-width="0" type="password" v-model="pwd" placeholder="请输入密码"></u-input>		
		</view>
		<view class="code">
			<u-input label-width="0"  type="password"  v-model="repwd" placeholder="请输入确认密码"></u-input>
		</view>
		<view class="submit">
			<u-button :loading='loading' shape="circle" @click="submit">注册</u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>

</template>

<script>

	export default {

		data() {
			return {
				loading:false,
				username:null,//手机号
				pwd:null,
				repwd:null,
				codeText: '获取验证码',//获取验证码
			}
		},
		onLoad() {

		},
		onShow() {

		},
		onPullDownRefresh() {
		    setTimeout(function () {
		        uni.stopPullDownRefresh();
		    }, 1000);
		},
		methods: {
			//获取验证码
			codeChange(text) {
				this.codeText = text
			},
			getCode() {
				if(!this.mobile){
					this.$u.toast('手机号格式不正确');
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.sendMessage(this.mobile)
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			// 发送验证码
			sendMessage(e){
				this.$http({
					url:this.$api.sendMessage,
					method:'POST',
					hideLoading:true,
					data:{
						mobile:e,
					},
					success:res=>{
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
						console.log('短信验证码----------',res)
					},
					fail:err=>{
						
					},complete:e=>{
						uni.hideLoading();
					}
				})
			},
			// 登录
			submit(){
				if(!this.username){
					this.$refs.uToast.show({
						title: '账号格式不正确',
						type: 'error'
					})
					return
				}
				if(!this.pwd){
					this.$refs.uToast.show({
						title: '密码格式不正确',
						type: 'error'
					})
					return
				}
				if(this.repwd!=this.pwd){
					this.$refs.uToast.show({
						title: '两次密码不一致',
						type: 'error'
					})
					return
				}
				this.loading = true
				this.$http({
					url:this.$api.register,
					method:'POST',
					hideLoading:true,
					data:{
						username:this.username,
						password:this.pwd
					},
					success:res=>{
						if(res.data){
							this.$refs.uToast.show({
								title: '注册登录成功',
								type: 'error'
							})
						
						console.log('登录结果----------',res)
						uni.setStorage({
						    key: 'userInfo',
						    data: res.data,
						    success:res=> {
						        console.log('success');
								uni.switchTab({
								    url: '/pages/Chartered/index'
								});
						    }
						});
						}
					},
					fail:err=>{
						uni.showLoading({
							title:"注册失败",
							mask:true
						})
					},complete:e=>{
						this.loading = false
					}
				})
				
			}
		}
	}
</script>

<style lang="less" scoped>
	.main {
		.title{
			font-size: 36rpx;
			font-weight: 600;
			color: #000000;
			line-height: 50rpx;
			margin: 160rpx 0 70rpx 0;
			padding: 0 42rpx;
		}
		/deep/.u-border-bottom:after {
			border: 0;
		}
		.phone,.code{
			border-bottom: 1rpx solid #F2F2F2;
			margin: 0 42rpx;
			padding: 20rpx;
		}
		.code{
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			/deep/button{
				background-color: #ffffff;
				font-size: 26rpx;
				font-weight: 400;
				color: #EF3C37;
				line-height: 36rpx;
			}
		}
		.submit{
			width: 670rpx;
			margin: 104rpx auto;
			/deep/button{
				width: 670rpx;
				height: 80rpx;
				background:  #EF3C37;
				box-shadow: 0rpx 2rpx 6rpx 0rpx #F69C9A;
				border-radius: 45rpx;
				font-size: 34rpx;
				font-weight: 600;
				color: #FBFBFB;
			}
		}
	}
</style>
